<template>
  <el-dialog v-model="dialogVisible" class="my-dialog" style="min-width: 60%;">
    <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
      <el-tab-pane name="details" label="活动详情">
        <el-descriptions border :column="1" size="small" class="my-description">
          <el-descriptions-item label-align="center" v-for="(item, index) in labelList" :key="index">
            <template #label>
              <p class="my-label">{{ item.label }}</p>
            </template>
            <div v-if="item.prop == 'video'" class="flexLeftCenter">
              <div class="video-placeholder flexCenter" v-for="(it, idx) in detailsData.video" :key="idx">
                <video :src="it.url" id="myvideo" controls ref="myvideo"></video>
              </div>
            </div>
            <div v-else-if="item.prop == 'activity_no'">{{ detailsData[item.prop] }} <el-icon
                color="var(--el-color-primary)" class="copy-icon" size="16" @click.stop="copy(detailsData[item.prop])">
                <CopyDocument />
              </el-icon> </div>
            <span v-else>{{ item.prop.indexOf('.') != -1 ?
              detailsData[item.prop.split('.')[0]]?.[item.prop.split('.')[1]] : detailsData[item.prop] }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="活动日志" name="log">
        <el-table border :data="tableData" size="small">
          <el-table-column v-for="(item, index) in tableProps" :key="index" :prop="item.prop" :label="item.label"
            align="center" :width="item.width || ''"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
  <!-- 视频预览 -->
  <!-- <el-dialog v-model="previewVideo" class="video-preview" @close="closePreview">
    <video :src="videoUrl" id="myvideo" controls ref="myvideo"></video>
  </el-dialog> -->
</template>
<script setup>
import { ref, watchEffect, onUpdated, nextTick } from 'vue'
import { getActivityLog } from '@/api/activityManage/activityManage';
import { ElMessage } from 'element-plus';
import { isEmpty } from 'lodash-es';

const activeName = ref('details')
const dialogVisible = ref(false)

const current_activity_id = ref('');

const previewVideo = ref(false)
const videoUrl = ref('')
const myvideo = ref(null);

const detailsData = ref({});
const labelList = ref([
  { label: '活动编号', prop: 'activity_no' },
  { label: '设备编号', prop: 'sticker_num' },
  { label: '用户编号', prop: 'user_no' },
  { label: '用户银行账户', prop: 'user.card_number' },
  { label: '用户邮箱', prop: 'user.user_email' },
  { label: '活动状态', prop: 'status_label' },
  { label: '活动创建时间', prop: 'create_time' },
  { label: '商家编号', prop: 'client_no' },
  { label: '活动类型', prop: 'type_label' },
  { label: '视频信息', prop: 'video' },
  { label: '结算结果', prop: 'rec_result.result' },
  { label: '模板快照', prop: 'snapshot' }
]);

const tableProps = ref([
  { prop: 'create_time', label: '时间', width: '150px' },
  { prop: 'status_label', label: '操作日志', width: '100px' },
  { prop: 'data', label: '明细' },
])

const tableData = ref([])


// methods
const handleClick = async (tab) => {
  if (tab.paneName === activeName.value) {
    return;
  }
  activeName.value = tab.paneName;
  getLog();
}


const copy = (text) => {
  if (navigator.clipboard&&navigator.clipboard.writeText) {
    navigator.clipboard.writeText(text);
    ElMessage.success('复制成功')
  } else {
    try {
      let txAr = document.createElement('textarea');
      txAr.value = text;
      txAr.style.position = 'fixed';
      txAr.style.opacity = 0;
      txAr.readOnly = true;
      txAr.style.left = '-9999px';
      txAr.style.top = '-9999px';
      document.body.appendChild(txAr);
      txAr.select();
      document.execCommand('copy');
      ElMessage.success('复制成功')
      document.body.removeChild(txAr);
    } catch (error) {
      ElMessage.error('浏览器不支持')
    }
  }
}

const toPreviewVideo = (url) => {
  previewVideo.value = true;
  videoUrl.value = url;
}

const getLog = async () => {
  if (activeName.value === 'log' && isEmpty(tableData.value)) {
    const res = await getActivityLog(detailsData.value.activity_no);
    if (res.code === 1000) {
      tableData.value = res.data;
    }
  }
}

// const closePreview = () => {
//   console.log(myvideo);
//   myvideo.value.pause();
//   myvideo.value.currentTime = 0;
//   previewVideo.value = false;
//   videoUrl.value = '';
//   myvideo.value.src = '';
// }


defineExpose({
  dialogVisible,
  detailsData
})

watchEffect(() => {
  if (dialogVisible.value == false) {
    nextTick(() => {
      tableData.value = [];
    })
  }
})

// life
onUpdated(() => {
  getLog();
})
</script>
<style lang="less" scoped>
:deep(.el-dialog__body) {
  padding-top: 0 !important;
}

.my-description {
  width: calc(100% - var(--el-dialog-padding-primary));
}

.my-label {
  width: 100px;
}

.copy-icon {
  transform: translateY(3px);
  cursor: pointer;
}

// .video-placeholder {
//   width: 100px;
//   height: 100px;
//   background: #f3f3f3;
//   margin-right: 10px;
//   font-size: 50px;
//   cursor: pointer;
// }
#myvideo{
  width: 450px;
  height: 350px;
}
</style>